<template>
  <el-drawer 
v-model="showDrawer" 
:title="title"
:size="size"
:close-on-click-modal="false"
:destroy-on-close="destroyOnClose"
>
 <div class="formDrawer">
  <!-- 抽屉内容 -->
  <div class="body">
      <slot></slot>
  </div>

  <!-- 抽屉脚注 -->
  <div class="actions">
      <el-button type="primary" @click="submit">{{confirmText}}</el-button>
      <el-button type="default" @click="close">取消</el-button>
  </div>

 </div>
  
</el-drawer>
</template>
<script setup>
  import {ref} from 'vue'
  const showDrawer = ref(false)

  const props = defineProps({
      // 抽屉标题
      title:String,
      // 抽屉宽度
      size: {
          type: String,
          default: '45%'
      },
      destroyOnClose: {
          type: Boolean,
          default: false
      },
      confirmText: {
          type: String,
          default: '提交'
      }
  })

  const loading = ref(false)
    const showLoading = ()=>loading.value = true
    const hideLoading = ()=>loading.value = false


  // 打开抽屉
  const open = () => showDrawer.value = true
  // 关闭抽屉
  const close = () => showDrawer.value = false

// 提交

  const emit = defineEmits(['submit'])
  const submit = () => {
  // 触发submit事件
  emit('submit')
  }

  // 向父组件暴露以下方法
  defineExpose({open, close,
        showLoading,
        hideLoading})
</script>
<style>
  .formDrawer{
      width: 100%;
      height: 100%;
      position: relative;
      @apply flex flex-col;
  }

  .formDrawer .body{
      flex: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 50px;
      overflow-y: auto;
  }

  .formDrawer .actions{
      height: 50px;
      @apply mt-auto flex items-center;
  }
</style>